<template>
    <div id="bg">
        <el-card class="form-card">
            <template #header>
                <div class="card-header">
                    <span>登录</span>
                </div>
            </template>
            <el-form class="form">
                <form prop="username">
                    <span>账号</span>
                    <input v-model="form.username"/>
                </form>
                <form prop="password">
                    <span>密码</span>
                    <input v-model="form.password"/>
                </form>
                <el-form-item>
                    <el-button @click="submit()" type="primary">登录</el-button>
                </el-form-item>
            </el-form>
            <el-row justify="space-between">
                <el-col :span="5">
                    <el-link href="/#/Register" type="info">注册账号</el-link>
                </el-col>
                <el-col :span="5">
                    <el-link type="info">忘记密码?</el-link>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
    
<script setup>
import admin from '@/api/admin';
// import { ElMessage } from 'element-plus';
import {ref,reactive} from 'vue'
import { useRoute, useRouter } from 'vue-router';
let router = useRouter();
let form = reactive({
  username: '',
  password: '',
});
let submit = async () => {
    console.log({...form});
    let { status, msg ,data} = await admin.login({...form});
    if (status) {
        // 缓存数据
        sessionStorage.id = data.id;
        sessionStorage.role = data.role;
        sessionStorage.token = data.token;
        router.push('/goods/list')
    }else{
        ElMessage.error(msg)
    }

}
</script>
<style lang="less" scoped>
#bg {
    position: relative;
    min-height: 100vh;
    background: url(../assets/img/space.webp) top center;
    background-size: cover;

    .form-card {
        width: 400px;
        position: absolute;
        color: aliceblue;
        font-size: 16px;
        top: 50%;
        right: 30px;
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, .5);
        border-right: 1px solid rgba(255, 255, 255, .2);
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        border-radius: 10px;
        backdrop-filter: blur(50px);
        transform: translateY(-50%);

        span {
            font-size: 14px;
            padding: 5px;
        }

        .card-header span {
            font-size: 18px;
        }

        .form input {
            width: 300px;
            height: 30px;
            border: 0;
            outline: none;
            padding-left: 5px;
            background-color: rgba(255, 255, 255, 0.338);
            border-radius: 5px;
            margin: 0 0 10px 20px;
        }
    }

}
</style>